<template>
  <div class="home">
    <router-view> </router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item
        to="/home/index"
        @click="change(0)"
        :class="{ active: btnnum == 0 }"
      >
        <template>
          <img :src="icon.active" />
        </template>
        <span>书架</span>
      </van-tabbar-item>
      <van-tabbar-item to="/home/find" @click="change(1)">
        <template>
          <img :src="icon.inactive" />
        </template>
        <span>书城</span>
      </van-tabbar-item>
      <van-tabbar-item to="/home/news" @click="change(2)">
        <template> <img :src="icon.fen" /> </template>
        <span>分类</span></van-tabbar-item
      >
      <van-tabbar-item to="/home/my" @click="change(3)">
        <template> <img :src="icon.my" /> </template>
        <span>我的</span></van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      active: 0,
      btnnum: 0,
      icon: {
        active: require("../assets/img/书架1.png"),
        inactive: require("../assets/img/书城.png"),
        fen: require("../assets/img/分类.png"),
        my: require("../assets/img/我的.png"),
      },
    };
  },

  mounted() {},
  methods: {
    change(e) {
      if (e === 0) {
        this.icon.active = require("../assets/img/书架1.png");
        this.icon.inactive = require("../assets/img/书城.png");
        this.icon.fen = require("../assets/img/分类.png");
        this.icon.my = require("../assets/img/我的.png");
      }
      if (e === 1) {
        this.icon.inactive = require("../assets/img/书城_1.png");
        this.icon.active = require("../assets/img/书架.png");
        this.icon.fen = require("../assets/img/分类.png");
        this.icon.my = require("../assets/img/我的.png");
      }
      if (e === 2) {
        this.icon.fen = require("../assets/img/分类_1.png");
        this.icon.inactive = require("../assets/img/书城.png");
        this.icon.my = require("../assets/img/我的.png");
      }
      if (e === 3) {
        this.icon.my = require("../assets/img/我的_1.png");
        this.icon.fen = require("../assets/img/分类.png");
        this.icon.active = require("../assets/img/书架.png");
      }
    },
  },
};
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  // background: pink;
  // padding: 30px;
}
h2,
p {
  margin-bottom: 10px;
}
.top {
  width: 100%;
  height: 200px;
  // background: pink;
  overflow-x: scroll;
}
.div {
  width: 200%;
  display: flex;
}
.divs {
  width: 80%;
  height: 200px;
  // background: orange;
  // margin-left: 20%;
  margin: 0 100px 0 0;
}
.divs span {
  font-size: 12px;
}
.van-tabbar-item__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.van-tabbar-item__text img {
  width: 28px;
  height: 28px;
  margin: 4px 0;
}
</style>
